<template>
  <div class="w-full h-full min-h-screen box-border relative">  
    <van-nav-bar 
      left-arrow 
      :title="$t('pageTitle.accountSecurity')" 
      @click-left="router.back()" 
      safe-area-inset-top 
    />
    <van-cell-group :border="false" class="!mt-8">
      <van-cell 
        :title="$t('label.accountPassWord')" 
        is-link 
        to="/editPass"
        clickable
      >
        <template #icon>
          <div class="flex justify-center items-center mr-2">
            <van-icon name="user-circle-o" size="1.4rem" />
          </div>
        </template>
      </van-cell>
      <van-cell
        is-link
        :title="$t('label.withdrawalPassWord')"
        to="/withdrawPass"
        clickable
      >
        <template #icon>
          <div class="flex justify-center items-center mr-2">
            <van-icon name="cash-on-deliver" size="1.4rem" />
          </div>
        </template>
      </van-cell>
      <van-cell
        is-link
        :title="$t('label.bankCard')"
        to="/bank"
        clickable
      >
        <template #icon>
          <div class="flex justify-center items-center mr-2">
            <van-icon name="credit-pay" size="1.4rem" />
          </div>
        </template>
      </van-cell>
      <van-cell />
    </van-cell-group> 
    <div class="mt-8 mx-6">
      <van-button 
        round 
        block 
        type="primary" 
        color="#000"
        @click="logout()"
      >
        <span class="text-white text-[16px]">
          {{ $t('logout') }}
        </span>
      </van-button>
    </div>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup lang="ts">
import { showConfirmDialog } from "vant"

import { useRouter } from "vue-router"

import { useI18n } from 'vue-i18n'

import { useUserStore } from "@/store/user"

const user = useUserStore()

const router = useRouter()

const { t } =  useI18n({ useScope: 'global' })

const logout = () => {
  showConfirmDialog({
    title:  t('logoutTipsTitle'),
    message: t('logoutTips')
  }).then(async () => {
    await user.logout()
    router.replace('/login')
  }).catch(() => {

  })
}
</script>

<style lang="less" scoped></style>
